<template>
  <div class="user-center-page">
    <!-- 顶部导航栏 -->
    <BaseHeader
      :navs="navs"
      :activeNav="activeNav"
      @nav-change="activeNav = $event"
    />
    <!-- 头部用户信息 -->
    <div class="user-banner">
      <div class="user-info">
        <img class="avatar" src="@/assets/other/touxiang.jpg" alt="avatar" />
        <div class="user-meta">
          <div class="user-name">草原上的云</div>
          <div class="user-detail">
            ID：123456 &nbsp;&nbsp; 账号：1278397663
            <span class="tag">学员</span>
          </div>
        </div>
      </div>
      <div class="order-info">
        <div class="order-count">0 <span>笔</span></div>
        <div class="order-label">待支付订单</div>
      </div>
    </div>

    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 移动端菜单按钮 -->
      <button class="menu-toggle" v-if="isMobile" @click="menuDrawer = !menuDrawer">
        <span v-if="!menuDrawer">☰ 菜单</span>
        <span v-else>✕ 关闭</span>
      </button>
      <!-- 侧边栏菜单 -->
      <transition name="drawer">
        <div
          class="side-menu"
          v-if="!isMobile || menuDrawer"
          :class="{ mobile: isMobile, open: menuDrawer }"
        >
          <template v-for="(group, gi) in menuGroups">
            <div class="menu-title" :key="group.title" :style="gi > 0 ? 'margin-top:32px;' : ''">{{ group.title }}</div>
            <ul class="menu-list" :key="group.title + '-list'">
              <li
                v-for="item in group.items"
                :key="item.key"
                class="menu-item"
                :class="{ active: activeMenu === item.key }"
                @click="handleMenuClick(item.key)"
              >
                {{ item.label }}
              </li>
            </ul>
          </template>
        </div>
      </transition>
      <!-- 主内容区 -->
      <div class="content-area">
        <template v-if="activeMenu === 'record'">
         <div v-if="shuju.length>0">
            <!-- 观看记录 -->
            <div class="card">
              <div class="card-title">观看记录</div>
              <div class="card-date">{{ watchRecord.date }}</div>
              <div class="flex flex-justify">
                  <div class="card-row">
                  <div style="font-weight: bold">观看至：【{{ watchRecord.class }}】</div>
                  <div>课程：{{ watchRecord.course }}</div>
                  <div>问答：{{ watchRecord.qa }} &nbsp;&nbsp;笔记：{{ watchRecord.note }}</div>
                  </div>
                  <div class="card-actions">
                  <button class="card-btn line-btn">继续学习</button>
                  <button class="card-btn">课程目录</button>
                  </div>
              </div>
            </div>
            <!-- 做题记录 -->
            <div class="card">
              <div class="card-title">做题记录</div>
              <div class="card-date">{{ quizRecord.date }}</div>
              <div class="flex flex-justify">
                  <div class="flex flex-column">
                      <div class="card-row">
                          <div>每日一练：{{ quizRecord.title }}</div>
                          <div>用时：{{ quizRecord.time }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 题数：{{ quizRecord.count }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 正确率：{{ quizRecord.correct }}%</div>
                      </div>
                      <div class="flex" style="width:60%">
                          <div class="progress-bar">
                              <div class="progress" :style="{ width: quizRecord.percent + '%' }"></div>
                          </div>
                          <div class="progress-label">完成度 <span class="actives">{{ quizRecord.percent }}%</span></div>
                      </div>
                  </div>
                  <div class="card-actions">
                      <button class="card-btn">继续做题</button>
                  </div>
              </div>
            </div>
          </div>
          <div v-else>
            <div class="card-title">{{ menuGroups.flatMap(g=>g.items).find(i=>i.key===activeMenu)?.label }}</div>
            
            <div class="card-row" style="position:relative">
                <div class="empty-box">
                  <div class="img-box"> <img src="@/assets/other/empty.png"/> </div>
                  <div style="position:absolute;bottom:15%">暂无数据</div>
                </div>
            </div>
          </div>
        </template>
        <template v-else-if="activeMenu === 'remind'">
            <div class="flex flex-justify">
              <div class="tabs">
                  <div class="menu-item" :class="{active: activeClassTab === 'course'}" @click="switchClassTab('course')">课程列表</div>
                  <div class="menu-item" :class="{active: activeClassTab === 'record'}" @click="switchClassTab('record')">观看记录</div>
              </div>
              <div class="course-header">
                  <span>当前科目：CAAC</span>
                <el-button round size="mini" style="margin-left: 16px;"  icon="el-icon-refresh" >切换科目</el-button>
              </div>
            </div>
            <div v-if="shuju1.length>0"> 
              <div v-if="activeClassTab === 'course'" class="course-list">
                  <div class="course-card" v-for="i in 6" :key="i">
                      <div class="flex" style="margin-bottom:10px"> <img class="avtar" src="@/assets/other/touxiang.png"/><div>CAAC培训课程系列</div></div>
                      <div class="card-img"><img src="@/assets/other/tupian.png"/> </div>
                      <div class="flex flex-justify">
                        <div class="card-desc">初级课程</div>
                        <span class="price">¥998</span>
                      </div>
                      <div class="card-footer">
                        <div class="goStudy" @click="$router.push('/classDetail')">开始学习</div>
                      </div>
                  </div>
              </div>
              <div v-else class="record-list">
                  <div class="record-card" v-for="(item, idx) in recordList" :key="idx">
                      <div class="flex flex-justify flex-col-start">
                          <div class="flex flex-column" style="margin-top: 8px;">
                              <div class="record-date">{{ item.date }}</div>
                              <div class="record-info">
                              <span>观看课时：</span>
                              <span class="record-title">【{{ item.title }}】</span>
                              </div>
                              <div class="record-desc">课程：{{ item.course }}</div>
                          </div>
                          <div class="record-actions">
                              <button class="card-btn line-btn">继续学习</button>
                              <button class="card-btn">课程目录</button>
                          </div>
                      </div>
                  </div>
              </div>
            </div>
            <div v-else>
              <div class="card-row" style="position:relative">
                <div class="empty-box">
                  <div class="img-box"> <img src="@/assets/other/empty.png"/> </div>
                  <div style="position:absolute;bottom:15%">暂无数据</div>
                </div>
              </div>
            </div>
        </template>
        <template v-else-if="activeMenu === 'group'">
          <div class="flex flex-justify">
            <div class="tabs">
                <div class="tab" :class="{active: activeGroupTab === 'practice'}" @click="switchDGroupTab('practice')">章节练习</div>
                <div class="tab" :class="{active: activeGroupTab === 'mock'}" @click="switchDGroupTab('mock')">模拟试卷</div>
            </div>
            <div class="course-header">
                <span>当前目类：CAAC</span>
                <el-button round size="mini" style="margin-left: 16px;"  icon="el-icon-refresh" >切换目类</el-button>
            </div>
          </div>
            <div v-if="activeGroupTab === 'practice'" class="practice-table-wrap">
                <el-table :data="practiceList" border style="width: 100%">
                    <el-table-column prop="title" label="章节名称" min-width="200" class="left-algin"  align="left"/>
                    <el-table-column label="已做题数/总题数" min-width="180"  align="center">
                      <template slot-scope="scope">
                          <div class="flex flex-center flex-col-center" style="width:100%">
                              <el-progress :percentage="scope.row.done / scope.row.total * 100" :show-text="false" style="width: 80px; margin-right: 8px;" />
                              <span>{{ scope.row.done }}/{{ scope.row.total }}</span>
                          </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="correct" label="正确率" min-width="100" align="center"/>
                    <el-table-column label="操作" min-width="120"  align="center">
                    <template slot-scope="scope">
                            <button class="card-btn line-btn"  @click="showDialog=true">开始做题</button>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-else-if="activeGroupTab === 'mock'" class="mock-table-wrap">
             <el-table :data="practiceList2" border style="width: 100%">
                    <el-table-column prop="title" label="章节名称" min-width="200" class="left-algin" align="left"/>
                    <el-table-column label="已做题数/总题数" min-width="180" align="center">
                    <template slot-scope="scope">
                        <div class="flex flex-center flex-col-center">
                            <el-progress :percentage="scope.row.done / scope.row.total * 100" :show-text="false" style="width: 80px; margin-right: 8px;" />
                            <span>{{ scope.row.done }}/{{ scope.row.total }}</span>
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column prop="correct" label="正确率" min-width="100" align="center" />
                    <el-table-column label="操作" min-width="120" align="center">
                    <template slot-scope="scope">
                     <button class="card-btn line-btn"  @click="$router.push('/zuoti')">开始做题</button>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
        </template>
        <template v-else-if="activeMenu === 'certificate'">
            <div class="flex flex-justify">
              <div class="tabs">
                  <div class="tab" :class="{active: activeCertificateTab === 'practice'}" @click="switchCertificateTab('practice')">章节练习</div>
                  <div class="tab" :class="{active: activeCertificateTab === 'mock'}" @click="switchCertificateTab('mock')">模拟试卷</div>
              </div>
              <div class="course-header">
                  <span>当前目类：CAAC</span>
                 <el-button round size="mini" style="margin-left: 16px;"  icon="el-icon-refresh" >切换目类</el-button>
              </div>
            </div>
            <div v-if="activeCertificateTab === 'practice'" class="practice-table-wrap">
                <el-table :data="practiceList" border style="width: 100%">
                    <el-table-column prop="title" label="章节名称" min-width="200" align="left"/>
                    <el-table-column label="错题数" min-width="180" align="center">
                    <template slot-scope="scope">
                        <div class="flex flex-center flex-col-center">
                            <span>{{ scope.row.done+3 }}</span>
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="120" align="center">
                    <template slot-scope="scope">
	                    <button class="card-btn line-btn line-btn-nomarl"  @click="$router.push('/zuoti')">查看解析</button>
                          <button class="card-btn line-btn"  @click="showDialog=true">开始做题</button>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-else-if="activeCertificateTab === 'mock'" class="mock-table-wrap">
             <el-table :data="practiceList2" border style="width: 100%">
                    <el-table-column prop="title" label="章节名称" min-width="200"  align="left"/>
                    <el-table-column label="错题数" min-width="180" align="center">
                    <template slot-scope="scope">
                        <div class="flex flex-center flex-col-center">
                            <span>{{ scope.row.done+3 }}</span>
                        </div>
                    </template>
                    </el-table-column>
	             
                    <el-table-column label="操作" min-width="120" align="center">
                    <template slot-scope="scope">
	                    <button class="card-btn line-btn line-btn-nomarl"  @click="$router.push('/zuoti')">查看解析</button>
                        <button class="card-btn line-btn"  @click="$router.push('/zuoti')">开始做题</button>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
        </template>
        <template v-else-if="activeMenu === 'yuyue'">
              <div class="flex flex-justify">
              <div class="tabs">
                  <div class="menu-item active" style="font-size:20px;font-weight:bold;" @click="switchClassTab('course')">训练预约</div>
              </div>
              <div class="course-header">
                  <span>当前目类：CAAC</span>
                <el-button round size="mini" style="margin-left: 16px;"  icon="el-icon-refresh" >切换科目</el-button>
              </div>
            </div>
            <el-card class="notice-card flex flex-justify flex-column">
              <div class="notice-title">下午预约训练通知</div>
              <ol class="notice-list">
                <li>训练时间：每周一至周日，上午：9:00-12:00（限一班），下午：13:00-16:00（限一班），具体以系统安排为准。</li>
                <li>预约方式：请提前在本系统进行预约，预约成功后请准时参加训练。</li>
                <li>注意事项：如有特殊情况不能按时参加，请提前取消预约。</li>
                <li>每人每天最多可预约1次，预约名额有限，先到先得。</li>
                <li>如有疑问请联系管理员。</li>
              </ol>
            </el-card>
            <el-card>
              <el-form class="reservation-form" :inline="true">
                <el-form-item label="场地预约">
                  <el-select v-model="subject" placeholder="请选择科目" style="width:260px">
                    <el-option label="CAAC" value="CAAC" />
                    <el-option label="UTC" value="UTC" />
                  </el-select>
                </el-form-item>
                <el-form-item label="日期" style="margin-left:20px">
                  <el-date-picker v-model="date" type="date" placeholder="选择日期" style="width:260px"/>
                </el-form-item>
              </el-form>
              <div class="reservation-time">
                <div class="time-block flex flex-justify flex-col-center" :class="chooseYuYue?'':'line-box'" style="width:30%" @click="chooseYuYue = false">
                  <div class="time-title" style="flex:1"  :class="chooseYuYue?'':'line-choose'">上午</div>
                  <div class="flex flex-column" style="width:50%;flex:1">
                    <div type="primary" style="font-size:18px;color:#333;font-weight:bold">点击预约</div>
                    <div style="margin-top:6px">剩余：5</div>
                  </div>
                </div>
                <div class="time-block flex flex-justify flex-col-center" style="width:30%">
                  <div class="time-title">下午</div>
                   <div class="flex flex-column" style="width:50%;flex:1">
                    <div type="primary" style="font-size:18px;color:#333;font-weight:bold">点击预约</div>
                    <div style="margin-top:6px">剩余：<span style="color:#ff0000">0</span></div>
                  </div>
                </div>
              </div>
              <div class="flex flex-justify flex-col-center yuyue-box">
                <div class="reservation-tip">每人每天可预约1次下午训练，预约名额有限，先到先得！</div>
                <button style="margin-top: 10px;  width:120px;" :class="chooseYuYue?'enonr-btns':'card-btn'"@click="chooseYuYue?'':showSuccess = true">提交</button>
              </div>
            </el-card>
            <div class="my-reservations">
              <div class="flex flex-col-center">
                <div class="my-reservations-title">
                  我的预约
                </div>
                <div class="my-reservations-sub-title">每周日下午17:00放下一周7天的预约位</div>
              </div>
              <el-table :data="reservationList" border style="width: 100%; margin-top: 10px;">
                <el-table-column prop="id" label="序号" width="80"  align="center"/>
                <el-table-column prop="subject" label="科目" align="center"/>
                <el-table-column prop="date" label="训练日期" align="center"/>
                <el-table-column prop="time" label="时间段"  align="center"/>
                <el-table-column prop="site" label="场地"  align="center"/>
                <el-table-column label="操作" align="center">
                  <template #default="scope">
                    <button class="card-btn line-btn" @click="showquxiaoSuccess = true">取消预约</button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
        </template>

        <template v-else-if="activeMenu === 'profile'">
          <!-- Tab切换栏 -->
          <el-tabs v-model="activeSelfTab">
            <el-tab-pane label="账号设置" name="account"></el-tab-pane>
            <el-tab-pane label="修改密码" name="password"></el-tab-pane>
            <el-tab-pane label="收货地址" name="address"></el-tab-pane>
          </el-tabs>

          <!-- 账号设置表单 -->
          <el-form v-if="activeSelfTab==='account'" :model="form" label-width="100px" class="account-form">
            <el-form-item label="头像">
	            <div  style="text-align: left;padding-left: 100px;display: flex;align-items: flex-end;">
		            <img :src="form.avatar" class="form-avatar" style="margin-right: 18px"/>
		            <el-button size="mini" type="text">修改</el-button>
	            </div>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="form.nickname" style="width: 300px;" />
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="form.gender" placeholder="请选择"  style="width: 300px;">
                <el-option label="男" value="male"></el-option>
                <el-option label="女" value="female"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="form.phone" style="width: 300px;margin-left:79px;margin-right:20px;" disabled />
              <el-button size="mini" type="text">修改手机号</el-button>
            </el-form-item>
            <el-form-item label="真实姓名">
              <el-input v-model="form.realName" style="width: 300px;" />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.email"  style="width: 300px;margin-left:44px;"/>
              <el-button size="mini" type="text" style="margin-left:20px;">修改</el-button>
            </el-form-item>
            <el-form-item label="微信号">
              <el-input v-model="form.wechat"  style="width: 300px;margin-left:44px;"/>
              <el-button size="mini" type="text" style="margin-left:20px;">修改</el-button>
            </el-form-item>
            <el-form-item label="所在地区">
	            <div style="    text-align: left;padding-left: 100px;height: 100%;display: flex;width: 144%;">
		            <el-cascader
			            v-model="form.region"
			            :options="regionOptions"
			            placeholder="请选择地区"
			            style="width: 360px"
		            />
		            <el-cascader
			            v-model="form.region"
			            :options="regionOptions"
			            placeholder="请选择地区"
			            style="width: 360px;margin-left: 20px"
		            />
	            </div>
            </el-form-item>
	          <el-form-item label="学历">
		          <el-select v-model="form.gender" placeholder="请选择"  style="width: 300px;">
			          <el-option label="本科" value="male"></el-option>
			          <el-option label="研究生" value="female"></el-option>
		          </el-select>
	          </el-form-item>
            <el-form-item label="账户注销">
	         <div style="text-align: left;padding-left: 100px;height: 100%;"> <el-button size="mini" type="text">注销</el-button> </div>
	           
            </el-form-item>
            <el-form-item>
               <div class="card-btn flex flex-col-center flex-center" type="primary" style="width: 120px;">提交</div>
            </el-form-item>
          </el-form>
          <!-- 修改密码表单 -->
          <el-form
            v-if="activeSelfTab==='password'"
            :model="passwordForm"
            :rules="passwordRules"
            ref="passwordFormRef"
             label-width="100px"
            class="password-form account-form"
          >
            <el-form-item label="原密码" prop="oldPassword" required>
              <el-input v-model="passwordForm.oldPassword" type="password" placeholder="请输入原密码"  style="width: 300px;"  />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword" required>
              <el-input v-model="passwordForm.newPassword" type="password" placeholder="6-16位密码，区分大小写" style="width: 300px;" />
            </el-form-item>
            <el-form-item label="确认新密码" prop="confirmPassword" required>
              <el-input v-model="passwordForm.confirmPassword" type="password" placeholder="6-16位密码，区分大小写" style="width: 300px;" />
            </el-form-item>
            <el-form-item>
                <div class="card-btn flex flex-col-center flex-center" type="primary" style="width: 120px;text-align:center" @click="submitPasswordForm">提交</div>
            </el-form-item>
          </el-form>
          <!-- 收货地址表单 -->
          <el-form
            v-if="activeSelfTab==='address'"
            :model="addressForm"
            :rules="addressRules"
            ref="addressFormRef"
            label-width="100px"
            class="address-form account-form"
          >
            <el-form-item label="收件人" prop="name" required>
              <el-input v-model="addressForm.name" placeholder="请输入收件人" style="width: 300px;" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone" required>
              <el-input v-model="addressForm.phone" placeholder="请输入手机号" style="width: 300px;margin-left:44px;" maxlength="11" />
              <el-button size="mini" type="text" style="margin-left:20px;">修改</el-button>
            </el-form-item>
            <el-form-item label="所在地区" prop="region" required>
              <el-cascader
                v-model="addressForm.region"
                :options="regionOptions"
                placeholder="请选择省/市/区"
                style="width: 300px;" 
              />
            </el-form-item>
            <el-form-item label="详细地址" prop="detail" required>
              <el-input v-model="addressForm.detail" type="textarea" :rows="2" placeholder="请输入详细地址，如xx路xx小区xx栋xx室" style="width: 300px;"  />
            </el-form-item>
            <el-form-item>
              <div class="card-btn flex flex-col-center flex-center" type="primary" style="width: 120px;" @click="submitAddressForm">提交</div>
            </el-form-item>
          </el-form>
        </template>
        <template v-else-if="activeMenu === 'order'">
          <div class="order-content">
            <el-tabs v-model="activeTab"  class="demo-tabs">
              <el-tab-pane label="全部订单" name="all"></el-tab-pane>
              <el-tab-pane label="待支付" name="pending"></el-tab-pane>
              <el-tab-pane label="已支付" name="paid"></el-tab-pane>
            </el-tabs>
            <el-table :data="filteredOrders" border style="width: 100%; margin-top: 20px;">
              <el-table-column label="订单详情" width="350">
                <template slot-scope="scope">
                  <div class="order-detail">
                    <img class="order-img" src="@/assets/other/tupian.png" />
                    <div>
                      <div style="font-weight:bold">{{ scope.row.title }}</div>
                      <div class="order-time">下单时间：{{ scope.row.time }}</div>
                      <div class="order-valid">有效期至：{{ scope.row.valid }}</div>
                       <div class="order-valid">订单号：{{ scope.row.orderId }}</div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="amount" label="金额" align="center"/>
              <el-table-column prop="status" label="状态" align="center">
                <template slot-scope="scope">
                <!--  <el-tag :type="scope.row.status === '已支付' ? 'success' : 'warning'">{{ scope.row.status }}</el-tag> -->
                    <div>{{ scope.row.status }}</div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="280" align="center">
                <template slot-scope="scope">
                 <button class="card-btn line-btn" v-if="scope.row.status === '已支付'"  @click="applyInvoice(scope.row)">申请开票</button>
                 <button class="card-btn" style="margin-left:16px;margin-right:0px;" v-if="scope.row.status === '已支付'"  @click="goToStudy(scope.row)">进入学习</button>
                  <i class="el-icon-delete delete" @click="deleteOrder(scope.row)" style="font-size:24px"></i>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
        <template v-else>
          <div class="card">
            <div class="card-title">{{ menuGroups.flatMap(g=>g.items).find(i=>i.key===activeMenu)?.label }}</div>
            <div class="card-row">暂无数据</div>
          </div>
        </template>
      </div>
    </div>
    <div v-if="showDialog" class="vip-dialog-mask">
      <div class="vip-dialog">
        <img src="@/assets/index/nomore.png" class="dialog-top-img" />
        <div class="dialog-msg">
          很抱歉您还未购买相应课程，无法查看相关资料哦！
        </div>
        <div class="dialog-btns">
          <button class="btn-cancel" @click="showDialog = false">取 消</button>
          <button class="btn-buy" @click="goBuy">去购买</button>
        </div>
      </div>
    </div>
      <div v-if="showquxiaoSuccess" class="success-dialog-mask" @click.self="showquxiaoSuccess = false">
        <div class="success-dialog" @click.stop>
          <img src="@/assets/other/quxiao.png" class="success-img" />
        </div>
    </div>
    <div v-if="showSuccess" class="success-dialog-mask" @click.self="showSuccess = false">
        <div class="success-dialog" @click.stop>
          <img src="@/assets/other/chenggong.png" class="success-img" />
        </div>
    </div>
    <!-- 底部信息 -->
    <BaseFooter />
  </div>
</template>

<script>
import BaseHeader from "@/components/baseHeader.vue";
import BaseFooter from "@/components/baseFooter.vue";
export default {
  name: "VocationalSkills",
  components: { BaseHeader,BaseFooter },
  data() {
    return {
      chooseYuYue:true,
      shuju:[123],
      shuju1:[123],
      showDialog:false,
      navs: ["首页", "新闻", "题库", "资料", "职业技能"],
      activeNav: "职业技能",
      // 左侧菜单数据
      menuGroups: [
        {
          title: "无人机技能认证",
          items: [
            { label: "我的记录", key: "record" },
            { label: "购买课程", key: "remind" },
            { label: "开始做题", key: "group" },
            { label: "错题本", key: "certificate" },
            { label: "训练预约", key: "yuyue" },
          ],
        },
        {
          title: "个人管理",
          items: [
            { label: "基本信息", key: "profile" },
            { label: "我的订单", key: "order" },
          ],
        },
      ],
      activeMenu: "record",
      // 观看记录数据
      watchRecord: {
        date: "2025年4月30日",
        class: "春华不怕",
        course: "CSPM-3训练班（操作/理论）",
        qa: 0,
        note: 0,
      },
      // 做题记录数据
      quizRecord: {
        date: "2025年4月30日",
        title: "2025年4月22日云试讲稿第32工程师",
        time: "09分",
        count: 100,
        correct: 0,
        percent: 10,
      },
      // 移动端菜单抽屉
      menuDrawer: false,
      activeTab: 'course',
      recordList: [
        { date: '2025年4月30日', title: '精华版介绍', course: 'CSPM-3精华版（单广配）' },
        { date: '2025年4月30日', title: '精华版介绍', course: 'CSPM-3精华版（单广配）' },
        { date: '2025年4月30日', title: '精华版介绍', course: 'CSPM-3精华版（单广配）' },
        { date: '2025年4月30日', title: '精华版介绍', course: 'CSPM-3精华版（单广配）' },
        { date: '2025年4月30日', title: '精华版介绍', course: 'CSPM-3精华版（单广配）' },
      ] ,
      activeGroupTab: 'practice',
      practiceList: [
        { title: '第1章 理论管理基础', done: 0, total: 10, correct: '-' },
        { title: '第2章 理论管理环境', done: 0, total: 10, correct: '-' },
        { title: '第3章 人-项目组与项目团队', done: 0, total: 10, correct: '-' },
        { title: '第4章 人-干系人与沟通', done: 0, total: 10, correct: '-' },
        { title: '第5章 证据-规划与目标', done: 0, total: 10, correct: '-' },
        { title: '第6章 证据-风险与需求', done: 0, total: 10, correct: '-' },
        { title: '第7章 证据-进度与成本', done: 0, total: 10, correct: '-' },
        { title: '第8章 证据-质量与变更', done: 0, total: 10, correct: '-' },
        { title: '第9章 证据-风险与不确定性', done: 0, total: 10, correct: '-' },
        { title: '第11章 敏捷管理&极限团队三大角色', done: 1, total: 10, correct: '-' },
      ],
       practiceList2: [
        { title: '第1章 理论管理基础', done: 0, total: 10, correct: '-' },
        { title: '第2章 理论管理环境', done: 0, total: 10, correct: '-' },
        { title: '第3章 人-项目组与项目团队', done: 0, total: 10, correct: '-' },
        { title: '第4章 人-干系人与沟通', done: 0, total: 10, correct: '-' },
        { title: '第5章 证据-规划与目标', done: 0, total: 10, correct: '-' },
        { title: '第6章 证据-风险与需求', done: 0, total: 10, correct: '-' },
        { title: '第7章 证据-进度与成本', done: 0, total: 10, correct: '-' }
      ],
      activeCertificateTab:"practice",
      reservationList:[
        { id: 1, subject: 'CAAC', date: '2025-08-05', time: '上午', site: '基地1' },
        { id: 2, subject: 'CAAC', date: '2025-08-11', time: '上午', site: '基地1' },
        { id: 3, subject: 'CAAC', date: '2025-08-13', time: '上午', site: '基地1' },
      ],
      date:'',
      subject:'CAAC',
      showSuccess:false,
      showquxiaoSuccess:false,
      activeClassTab:'course',
      activeTab: 'all',
      orders: [
        {
          id: 1,
          img: '@/assets/other/tupian.png',
          title: 'CAAC初级证书培训视频',
          time: '2022-08-10 12:14:42',
          valid: '2024-04-25',
          amount: '￥2700.00',
          status: '已支付',
          orderId: '12324567890-98765'
        },
        {
          id: 2,
          img: '@/assets/other/tupian.png',
          title: 'CAAC初级证书培训视频',
          time: '2022-08-10 12:14:42',
          valid: '2024-04-25',
          amount: '￥2700.00',
          status: '已支付',
          orderId: '12324563423132121'
        }
      ],
      activeSelfTab: 'account',
      user: {
        avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
        nickname: '草原上的云',
        id: '123456',
        phone: '12378907663',
        level: 'V1',
        orders: 0
      },
      form: {
        avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
        nickname: '草原上的云',
        gender: 'male',
        phone: '189****0697',
        realName: '',
        email: 'g*******8@qq.com',
        wechat: '',
        region: [],
        address: '',
        registerTime: '2021-01-01'
      },
      regionOptions: [
        // 省市区数据
      ],
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      passwordRules: {
        oldPassword: [
            { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        newPassword: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { min: 6, max: 16, message: '密码长度6-16位', trigger: 'blur' }
        ],
        confirmPassword: [
            { required: true, message: '请确认新密码', trigger: 'blur' },
            { validator(rule, value, callback) {
                if (value !== this.passwordForm.newPassword) {
                callback(new Error('两次输入密码不一致'));
                } else {
                callback();
                }
            }, trigger: 'blur'
            }
        ]
      },
      addressForm: {
        name: '',
        phone: '',
        region: [],
        detail: ''
      },
      addressRules: {
        name: [
          { required: true, message: '请输入收件人', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择省市区', trigger: 'change' }
        ],
        detail: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ]
      },
    }   
  },
  computed: {
    isMobile() {
      return this.$data._isMobile;
    },
    filteredOrders() {
      if (this.activeTab === 'all') return this.orders
      if (this.activeTab === 'pending') return this.orders.filter(o => o.status === '待支付')
      if (this.activeTab === 'paid') return this.orders.filter(o => o.status === '已支付')
      return []
    }
  },
  mounted() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.$set(this.$data, '_isMobile', window.innerWidth <= 800);
      if (window.innerWidth > 800) this.menuDrawer = false;
    },
    handleMenuClick(key) {
      this.activeMenu = key;
      if (this.isMobile) this.menuDrawer = false;
    },
    switchTab(tab) {
      this.activeTab = tab;
    },
    switchDGroupTab(tab) {
      this.activeGroupTab = tab;
    },
    switchClassTab(tab){
      this.activeClassTab = tab;
    },
    goBuy(){
        
    },
    //订单详情事件
    switchCertificateTab(tab) {
      this.activeCertificateTab = tab;
    },
    applyInvoice(order) {
      this.$message.success('申请开票功能待接入')
    },
    goToStudy(order) {
      this.$message.info('跳转到学习页面')
    },
    deleteOrder(order) {
      this.$confirm('确定要删除该订单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("===1",)
        this.orders = this.orders.filter(o => o.id !== order.id)
        this.$message.success('删除成功')
      }).catch(() => {
        // 用户点击“取消”
        this.$message.info('已取消删除')
      })
    },
    //个人信息事件
    submitPasswordForm(){
        this.$refs.passwordFormRef.validate(valid => {
            if (valid) {
            this.$message.success('密码修改成功');
            // 这里可调用后端接口
            this.passwordForm.oldPassword = '';
            this.passwordForm.newPassword = '';
            this.passwordForm.confirmPassword = '';
            }
        });
     },
    submitAddressForm(){
      this.$refs.addressFormRef.validate(valid => {
        if (valid) {
          this.$message.success('收货地址已保存');
          // 这里可调用后端接口
        }
      });
    },
    editAddressPhone(){
      this.$message.info('请联系客服修改手机号');
    },
  },
};
</script>

<style scoped lang="scss">
.user-center-page {
  background: #fafbff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.user-banner {
  width: 100%;
  min-height: 140px;
  background: url('@/assets/other/bg.png') ;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36px 120px 36px 120px;
  box-sizing: border-box;
}
.user-info {
  display: flex;
  align-items: center;
}
.avatar {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  margin-right: 24px;
  background: #eee;
  object-fit: cover;
  border:2px solid #fff;
}
.user-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.user-name {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2px 8px #888;
  margin-bottom: 8px;
  text-align:left;
}
.user-detail {
  color: #fff;
  font-size: 15px;
  text-shadow: 0 2px 8px #888;
}
.tag {
  background: #1664ff;
  color: #fff;
  border-radius: 8px;
  padding: 2px 10px;
  font-size: 13px;
  margin-left: 12px;
}
.order-info {
  text-align: right;
  color: #fff;
  text-shadow: 0 2px 8px #888;
}
.order-count {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 4px;
}
.order-count span {
  font-size: 18px;
  font-weight: normal;
}
.order-label {
  font-size: 15px;
}
.main-content {
  max-width: 1200px;
  margin: 32px auto 0;
  display: flex;
  gap: 32px;
  width: 100%;
}
.side-menu {
  width: 200px;
  background: none;
  padding-top: 12px;
}
.menu-title {
  font-size: 16px;
  font-weight: bold;
  color: #222;
  margin-bottom: 10px;
}
.menu-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
}
.actives{
     color:rgb(251, 53, 106);
}
.menu-list li {
  font-size: 15px;
  color: #666;
  padding: 8px 0 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 2px;
  transition: background 0.2s, color 0.2s;
}
.menu-list li.active,
.menu-list li:hover {
  background: #e6f0ff;
  color: #1664ff;
}
.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px #e6eaf5;
  padding: 24px 32px 18px 32px;
  margin-bottom: 20px;
}
.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #222;
  margin-bottom: 8px;
  text-align:left;
  width:100%;
  padding-bottom:16px;
}
.card-date {
  color: #888;
  font-size: 14px;
  margin-bottom: 10px;
  text-align:left;
  width:100%;
}
.card-row {
  color: #444;
  font-size: 15px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  flex-direction: column;
  align-items: flex-start;
  .empty-box{
    width:100%;
    height:400px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .img-box{
        width:500px;
        height:500px;
        img{
          width:100%;
          height:100%;
        }
    }
  }
}
.card-actions {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  flex-direction: column;
}
.card-btn {
  background: #1664ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 18px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s;
  height:40px;
  width: 100px;
}
.line-btn{
   border:2px solid #409eff;
   background:#fff;
   color: #1664ff;
   padding: 6px;
}
.line-btn-nomarl{
	border:2px solid #ccc;
	background:#fff;
	color: #999;
	padding: 6px;
	margin-right: 16px;
}
.progress-bar {
  width: 100%;
  height: 6px;
  background: #e6eaf5;
  border-radius: 3px;
  margin: 10px 0 4px 0;
  overflow: hidden;
}
.progress {
  height: 100%;
  background: #1664ff;
  border-radius: 3px;
  transition: width 0.3s;
}
.progress-label {
  font-size: 13px;
  color: #888;
  margin-bottom: 6px;
  width:100px;
}
.menu-toggle {
  display: none;
  background: #1664ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 18px;
  font-size: 15px;
  margin-bottom: 18px;
  cursor: pointer;
}
@media (max-width: 800px) {
  .main-content {
    flex-direction: column;
    gap: 0;
  }
  .side-menu {
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 12px #e6eaf5;
    border-radius: 12px;
    margin-bottom: 18px;
    padding: 12px 0 12px 0;
    z-index: 100;
    position: relative;
  }
  .side-menu.mobile {
    position: fixed;
    left: 0;
    top: 0;
    width: 80vw;
    max-width: 320px;
    height: 100vh;
    background: #fff;
    box-shadow: 2px 0 16px #e6eaf5;
    border-radius: 0 12px 12px 0;
    padding: 32px 0 0 0;
    z-index: 2000;
    animation: slideIn 0.2s;
  }
  .side-menu.mobile.open {
    display: block;
  }
  .content-area {
    width: 100%;
    padding: 0;
  }
  .menu-toggle {
    display: block;
  }
}
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.drawer-enter-active, .drawer-leave-active {
  transition: opacity 0.2s;
}
.drawer-enter, .drawer-leave-to {
  opacity: 0;
}
.flex{
    display:flex;
    width:100%;
}
.flex-justify{
   justify-content: space-between;
}
.flex-center{
   justify-content: center;
}
.flex-col-center{
   align-items: center;
}
.flex-column{
    flex-direction: column;
}.content-area {
  flex: 1;
  padding: 22px 0;
  min-height: 600px;
}
.tabs {
  display: flex;
  gap: 32px;
  margin-bottom: 24px;
  cursor:pointer;
  .tab.menu-item.active{
    font-weight:bold; 
  }
}
.tab.active,.menu-item.active{
  font-weight:bold; 
}

.course-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  font-size: 16px;
  color: #222;
}
.course-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
}
.course-card {
  background: #f7f8fa;
  border-radius: 12px;
  box-shadow: 0 2px 8px #e1e3eb;
  padding: 16px 16px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .avtar{
    margin-right:10px;
    width:20px;
    height:20px;
    border-radius:50%;
  }
}
.card-img {
  width: 100%;
  height: 160px;
  border-radius: 12px;
  margin-bottom: 16px;
  img{
    width:100%;
    height:100%;
  }
}
.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 16px;
}
.card-desc {
  font-size: 16px;
  color: #000;
  margin-bottom: 16px;
  font-weight:bold;
}
.card-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .goStudy{
      width: 100%;
      height: 44px;
      border-radius: 8px;
      border: none;
      background: #1664ff;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
  }
}
.price {
  color: #ff4d4f;
  font-size: 16px;
  font-weight: bold;
}

/* 观看记录样式 */
.record-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width:100%;
}
.record-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #e1e3eb;
  padding: 20px 32px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.record-date {
  color: #888;
  font-size: 15px;
  margin-bottom: 6px;
  text-align:left;
  margin-top: 6px;
}
.record-info {
  font-size: 16px;
  color: #222;
  font-weight: bold;
   margin-bottom: 6px;
   text-align:left;
}
.record-title {
  color: #333;
   text-align:left;
}
.record-desc {
  color: #888;
  font-size: 15px;
   text-align:left;
}
.record-actions {
  margin-top: 8px;
  display: flex;
  flex-direction:column;
  gap: 16px;
}
.menu-list{
    .menu-item {
        font-size: 15px;
        color: #666;
        padding: 8px 32px;
        cursor: pointer;
        border-left: 2px solid #ccc;
        border-radius:0;
        transition: all 0.2s;
    }
  .menu-item.active{
    color: #1664ff;
    background: #f0f6ff;
    border-radius:0;
    border-left: 3px solid #1664ff;
    }
}
.flex-col-start{
   align-items: flex-start;
}

/* 章节练习表格样式 */
.practice-table-wrap {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #e1e3eb;
  padding: 0 0 24px 0;
}

/*弹框样式*/
.vip-dialog-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vip-dialog {
  width: 480px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
  padding: 40px 32px 32px 32px;
  text-align: center;
  position: relative;
}
.dialog-top-img {
  width: 120px;
  margin-bottom: 16px;
  margin-top: -40px;
}
.dialog-msg {
  font-size: 20px;
  color: #222;
  font-weight: 600;
  margin-bottom: 36px;
  margin-top: 8px;
}
.dialog-btns {
  display: flex;
  justify-content: center;
  gap: 24px;
  .btn-cancel {
    width: 120px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid #e5e6eb;
    background: #fff;
    color: #888;
    font-size: 16px;
    cursor: pointer;
    transition: border 0.2s;
    &:hover {
      border: 1px solid #1664ff;
    }
  }
  .btn-buy {
    width: 120px;
    height: 44px;
    border-radius: 8px;
    border: none;
    background: #1664ff;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    &:hover {
      background: #0056d6;
    }
  }
}
/*训练预约*/

.reservation-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.notice-card {
  margin-bottom: 24px;
  background:#F5F7FD;
}
.notice-title {
  font-weight: bold;
  margin-bottom: 8px;
  text-align:left;
}
.notice-list {
  padding-left: 18px;
  color: #666;
  font-size: 14px;
  text-align:left;
  li{
    margin-bottom:8px
  }
}
.reservation-form {
  margin-bottom: 16px;
}
.reservation-time {
  display: flex;
  gap: 32px;
  margin-bottom: 8px;
}
.time-block {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 16px 24px;
  text-align: center;
  min-width: 120px;
}
.time-title {
  font-weight: bold;
  margin-bottom: 8px;
}
.reservation-tip {
  color: #1664FF;
  font-size: 13px;
  margin: 8px 0;
}
.my-reservations {
  margin-top: 32px;
    margin-bottom: 8px;
}
.my-reservations-title {
  font-weight: bold;
  text-align:left;
  margin-bottom: 8px;
}
.my-reservations-sub-title{
  margin-bottom: 5px;
  margin-left:14px;
  font-weight: 500;
  font-size: 14px;
  color: #1664FF;
  line-height: 20px;
  text-align: left;
  font-style: normal;
}
/*预约弹框*/
.success-dialog-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.success-dialog {
  width: 420px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
  padding: 40px 32px 32px 32px;
  text-align: center;
  position: relative;
  animation: popIn 0.25s;
}
.success-img {
  padding-top:40px;
  width: 220px;
   height: 220px;
  margin-bottom: 16px;
  margin-top: -40px;
}
.success-msg {
  font-size: 24px;
  color: #409eff;
  font-weight: 600;
  margin-bottom: 8px;
  margin-top: 8px;
}
@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
/*订单详情*/
 .order-content {
  flex: 1;
  padding: 40px;
  .order-detail {
    display: flex;
    align-items: center;
    .order-img {
      width: 120px;
      height: 90px;
      border-radius: 8px;
      margin-right: 16px;
      object-fit: cover;
    }
    .order-time, .order-valid {
      font-size: 12px;
      color: #888;
    }
  }
  .delete{
    color:#ff0000;
    margin-left:10px;
  } 
}
/*个人信息*/
.my-info { background: #fff; min-height: 100vh; }
.user-header { display: flex; align-items: center; padding: 32px 0 16px 32px; background: linear-gradient(to right, #e0eafc, #cfdef3); }
.avatars { width: 80px; height: 80px; border-radius: 50%; }
.user-basic { margin-left: 24px; }
.nickname { font-size: 24px; font-weight: bold; }
.user-id, .user-phone, .user-level { color: #888; margin-top: 4px; }
.user-stats { margin-left: auto; text-align: center; }
.stat .num { font-size: 32px; font-weight: bold; }
.stat-label { color: #888; }
.account-form { max-width: 600px; margin: 32px auto; }
.form-avatar { width: 60px; height: 60px; border-radius: 20%; }
::v-deep .cell{
  display:flex;
  align-items: center;
  justify-content: center;
}
::v-deep .is-left>.cell{
  justify-content: flex-start;
}
::v-deep .reservation-form{
	display: flex;
}
.line-box{
  border:2px solid #1664FF;
  .line-choose{
    color:#1664FF;
  }
}
.yuyue-box{
  .enonr-btns{
    background: #1664FF;
    border-radius: 6px;
    opacity: 0.35;
    height:40px;
    padding: 6px 18px;
    font-size: 15px;
    color: #fff;
    border: none;
    cursor: pointer;
  }
  .card-btn {
    background: #1664ff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 18px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
    height:40px;
  }
}
.demo-tabs>.el-tabs__nav-wrap::after{
   display:none!important;
}
</style>
